<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<style>
		html,
		body {
			background: #273341;
		}
		
		#mycanvas {}
		
		.pie {
			width: 320px;
			height: 320px;
			margin: 0 auto;
		}
		
		img {
			width: 100%;
			display: none
		}
		
		.economy {
			text-align: center;
			transform: rotate(45deg);
			color: #fff;
			font-family: "微软雅黑";
			font-size: 14px;
		}
	</style>

	<body>
		<div class="pie">
			<canvas id="canvas" width="960" height="960" style="width:320px;height:320px;"></canvas>
		</div>
		<!-- canvas的画布宽高（分辨率）是width和height，而style中的宽高是canvas在页面中显示的宽高，画布分辨率越高，绘制出来的图任意缩放也不会出现很大的锯齿 -->
	</body>
	<script>
		var canvas = document.getElementById('canvas');
		var r2 = 380,
			r1 = 480;
		var ctx = canvas.getContext('2d');
		if(canvas.getContext) {
			var circle = {
				x: 480,
				y: 480,
				radius: 442
			}
			var smccircle = {
				x: 480,
				y: 480,
				radius: 342
			}
			//背景色
			ctx.fillStyle = '#273365';
			ctx.fillRect(0, 0, 960, 960);
			ctx.fill();
			//外彩色扇形背景圆1
//			ites(0, 360, 480, '#323d4b');
			//彩色外扇叶
			ites(0, 60, r1, '#4c17e2'); //>0

			//内覆盖扇形背景圆2
//			ites(0, 360, 300, '#273341');
			//交叉背景线
//			line(0, 480, 960, 480);
//			line(480, 0, 480, 960);
//			line(0, 0, 960, 960);
//			line(960, 0, 0, 960);

//			ctx.arc(480, 480, r2, 0, rads(45), false);
			ctx.save();
			//头像边框
//			drawCircularText(smccircle, '水分', rads(18), rads(28), 'center');
//			drawCircularText(smccircle, '蛋白质', rads(58), rads(78), 'center');
//			drawCircularText(smccircle, '内脏脂肪', rads(98), rads(127), 'center');
//			drawCircularText(smccircle, '骨骼', rads(153), rads(163), 'center');
//			drawCircularText(smccircle, '基础代谢', rads(188), rads(216), 'center');
//			drawCircularText(smccircle, 'BMI', rads(241), rads(253), 'center');
//			drawCircularText(smccircle, '脂肪', rads(287), rads(298), 'center');
//			drawCircularText(smccircle, '肌肉', rads(333), rads(343), 'center');
//
//			ctx.restore();
//			var v = 'left';
//			drawCircularText(circle, '60.5%', rads(24), rads(38), v);
//			drawCircularText(circle, '17.8%', rads(69), rads(83), v);
//			drawCircularText(circle, '    6', rads(114), rads(130), v);
//			drawCircularText(circle, '  4.3', rads(159), rads(175), v);
//			drawCircularText(circle, ' 1570', rads(204), rads(220), v);
//			drawCircularText(circle, ' 21.6', rads(249), rads(265), v);
//			drawCircularText(circle, '17.1%', rads(294), rads(308), v);
//			drawCircularText(circle, '55.5%', rads(339), rads(353), v);
			// Create a circular clipping path
//			ctx.translate(480, 480);
//			ctx.beginPath();
//			ctx.arc(0, 0, 160, 0, Math.PI * 2, true);
//			ctx.closePath();
//			ctx.strokeStyle = "#ffbc3a";
//			ctx.lineWidth = 16;
//			ctx.stroke();
//			ctx.clip();
//			var img = new Image();
//			img.src = 'css/img/head.png';
//			img.onload = function() {
//				ctx.drawImage(img, -160, -160, 320, 320);
//			}

		}
		//转换弧度
		function rads(x) {
			return Math.PI * x / 180;
		}
		//圆
		function ites(a, b, r, color) {
			ctx.beginPath();  //	起始一条路径，或重置当前路径
			ctx.moveTo(480, 480); //把路径移动到画布中的指定点，不创建线条
			ctx.arc(480, 480, r, rads(a), rads(b), false);//创建弧/曲线（用于创建圆形或部分圆）
			ctx.closePath();// 创建从当前点回到起始点的路径
			ctx.fillStyle = color;
			ctx.fill(); //填充当前绘图（路径）
		}
		//线
		function line(a, b, c, d) {
			ctx.beginPath();
			ctx.moveTo(a, b);
			ctx.lineTo(c, d);
			ctx.strokeStyle = "#273341";
			ctx.closePath();
			ctx.lineWidth = 10;
			ctx.stroke();
		}

		function siner(a, b, deg, font) {
			ctx.save();
			ctx.fillStyle = '#fff'
			ctx.textAlign = "center";
			ctx.font = '48px 微软雅黑';
			ctx.translate(a, b);
			ctx.rotate(rads(deg))
			ctx.fillText(font, 0, 0);
			ctx.restore();
		}

		function drawCircularText(s, string, startAngle, endAngle, lv) {
			var radius = s.radius,
				angleDecrement = (startAngle - endAngle) / (string.length - 1),
				angle = parseFloat(startAngle),
				index = 0,
				character;

			ctx.save();

			ctx.fillStyle = 'white';
			ctx.font = '40px 微软雅黑';
			ctx.textAlign = lv;
			ctx.textBaseline = 'middle';

			while(index < string.length) {
				character = string.charAt(index);

				ctx.save();
				ctx.beginPath();
				ctx.translate(s.x + Math.cos(angle) * radius,
					s.y + Math.sin(angle) * radius);
				ctx.rotate(Math.PI / 2 + angle);

				ctx.fillText(character, 0, 0);
				//            ctx.strokeText(character, 0, 0);

				angle -= angleDecrement;
				index++;
				ctx.restore();
			}
			ctx.restore();
		}
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		function drawArc(dot, r, angle, angleOfSlope, pop, title){
		    var newDot = [dot[0], dot[1]];
		    var a = (angleOfSlope+angle/2)*Math.PI/180; 
		    if(pop){ //计算圆心的新坐标
		        newDot[0] = dot[0]+10*Math.cos(a);
		        newDot[1] = dot[1]+10*Math.sin(a);
		    }
		    if(!angleOfSlope){
		        angleOfSlope = 0;
		    }
		    var aos = angleOfSlope*Math.PI/180;
		    var aos2 = (angleOfSlope+angle)*Math.PI/180;
		    var pstart = [newDot[0]+r*Math.cos(aos), newDot[1]+r*Math.sin(aos)]; //弧线的起点
		    var pend = [newDot[0]+r*Math.cos(aos2), newDot[1]+r*Math.sin(aos2)]; //弧线的终点
		    var pre = pstart;
		    for(var i=0; i < angle; i+=2){ //在angle范围内画弧
		        rad = (i+angleOfSlope)*Math.PI/180;
		        var cur = [r*Math.cos(rad)+newDot[0], r*Math.sin(rad)+newDot[1]];
		        drawLine(pre,cur);
		        pre = cur;
		    }
		}
		
		
	</script>

</html>